﻿@namespace Bit.BlazorUI
@inherits BitComponentBase

<div @ref="RootElement" @attributes="HtmlAttributes"
     id="@_Id"
     style="@StyleBuilder.Value"
     class="@ClassBuilder.Value"
     dir="@Dir?.ToString().ToLower()">
    @if (LabelTemplate is not null)
    {
        <label id="@_labelId">
            @LabelTemplate
        </label>
    }
    else if (Label.HasValue())
    {
        <label style="@Styles?.Label" class="bit-prb-lbl @Classes?.Label" id="@_labelId">
            @Label
        </label>
    }

    <div style="min-height: @(Thickness)px; @Styles?.BarContainer" class="@(Circular ? "bit-prb-crp" : "bit-prb-bcn") @Classes?.BarContainer">
        @if (Circular)
        {
            <svg style="@Styles?.BarContainer"
                 class="bit-prb-cir @Classes?.BarContainer"
                 height="@(Thickness * Radius)px"
                 width="@(Thickness * Radius)px">
                <circle style="stroke-width: @(Thickness)px; @Styles?.Track"
                        class="bit-prb-crt @Classes?.Track"
                        r="40%"
                        cx="50%"
                        cy="50%">
                </circle>
                <circle style="@GetProgressStyle()"
                        class="@(Indeterminate ? "bit-prb-cri" : "bit-prb-cbr") @Classes?.Bar"
                        r="40%"
                        cx="50%"
                        cy="50%">
                </circle>
            </svg>
        }
        else
        {
            <div style="height: @(Thickness)px; @Styles?.Track" class="bit-prb-trc @Classes?.Track"></div>
            <div class="bit-prb-bar @(Indeterminate ? "bit-prb-ind" : null) @Classes?.Bar"
                 role="progressbar"
                 aria-labelledby="@(Label.HasValue() || LabelTemplate is not null ? _labelId : null)"
                 aria-valuetext="@AriaValueText"
                 aria-describedby="@(Description.HasValue() ? _descriptionId : null)"
                 aria-valuemin="@(Indeterminate ? null : 0)"
                 aria-valuemax="@(Indeterminate ? null : 100)"
                 aria-valuenow="@(Indeterminate ? null : Normalize(Percent))"
                 style="@GetProgressStyle()">
            </div>
        }

        @if (ShowPercentNumber && Indeterminate is false)
        {
            <div style="@(Circular ? null : $"margin-top: {Thickness}px;") @Styles?.PercentNumber" class="@(Circular ? "bit-prb-ctx" : "bit-prb-pct") @Classes?.PercentNumber">
                @string.Format(PercentNumberFormat, Normalize(Percent))
            </div>
        }
    </div>

    @if (DescriptionTemplate is not null)
    {
        <div id="@_descriptionId">
            @DescriptionTemplate
        </div>
    }
    else if (Description.HasValue())
    {
        <div style="@Styles?.Description" class="bit-prb-des @Classes?.Description" id="@_descriptionId">
            @Description
        </div>
    }
</div>